import React from 'react';
import "./index.less"
import {
    Toast,
    NoticeBar,
    Carousel,
    WingBlank,
    Grid,
    Tabs,
    WhiteSpace,
    ListView,
} from 'antd-mobile';
import { getGoods, getNotify, getEntrance } from '@/api/home';
import TabBarExample from 'components/tabBar'
import TopBarExample from 'components/topBar'



export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            bgColor:'',
            params: {
                page: 1,
                category_id: 0,
                equipment_type: 2
            },
            tabs: [
                { title: '1st Tab' },
                { title: '2nd Tab' },
            ],
            goodsList: [],
            notify: {}, // 通知
            entranceList : [],
        }
    }

    componentDidMount() {
        getEntrance(
            {
                equipment_type: 2
            }
        ).then(res => {
            this.setState({
                entranceList : res.data.list
            })
        });

        getNotify(
            {
                page: 1,
                equipment_type: 2
            }
        ).then(res => {
            this.setState({
                notify : res.data.list[0]
            })
        });

        this.getGoodFun();

        window.onscroll = function() {
            const htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;  //获取网页的总高度
            const clientHeight = document.body.clientHeight || document.documentElement.clientHeight;  //clientHeight是网页在浏览器中的可视高度
            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;   //scrollTop是浏览器滚动条的top位置
            if (scrollTop >= ((htmlHeight * this.state.params.page) - clientHeight - 200) && this.state.isLoading === false) {
                this.setState((prevState) => ({
                    isLoading: true,
                    params: {
                        ...prevState.params,
                        page: prevState.params.page + 1
                    }
                }), () => {
                    this.getGoodFun(
                        {
                            ...this.state.params,
                            page: this.state.params.page
                        }
                    );
                });
            }
        }.bind(this);
    }

    // 商品列表
    getGoodFun = () => {
        getGoods(this.state.params).then((res) => {
            const { code, data, msg } = res;
            this.setState({
                isLoading: false,
                goodsList: [...this.state.goodsList, ...data.list]
            });
        });
    };

    // 入口
    goEntLogo = (dataItem) => {
        console.log(dataItem)
        // this.props.history.push({pathname:'/classify/good/detail/', state:{id:123}})
    };

    // 商品详情
    goDetail = (res) => {
        this.props.history.push(`/classify/good/detail?code=${res.code}`)
    };


    render() {
        return (
            <div className="home">
                {/*<TopBarExample title={'首页'}></TopBarExample>*/}
                <div className="home-content">
                    <div className="img-list">
                        <img
                            src={require('../../assets/img/home/banner.png')}
                            alt=""
                            style={{ width: '100%', height: '100%'}}
                            onLoad={() => {
                                // fire window resize event to change height
                            }}
                        />
                        {/*// <WingBlank>*/}
                        {/*//     <Carousel*/}
                        {/*//         autoplay={true}*/}
                        {/*        infinite*/}
                        {/*        autoplayInterval={2000}*/}
                        {/*    >*/}
                        {/*        {this.state.data.map((val, index) => (*/}
                        {/*            <img*/}
                        {/*                key={index}*/}
                        {/*                src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}*/}
                        {/*                alt=""*/}
                        {/*                style={{ width: '100%', height: '100%'}}*/}
                        {/*                onLoad={() => {*/}
                        {/*                    // fire window resize event to change height*/}
                        {/*                }}*/}
                        {/*            />*/}
                        {/*        ))}*/}
                        {/*    </Carousel>*/}
                        {/*</WingBlank>*/}
                    </div>
                    <div className="grid-list">
                        <Grid data={this.state.entranceList}
                              columnNum={4}
                              onClick={_el => this.goEntLogo(_el)}
                              renderItem={dataItem => (
                                  <div className="grid-item">
                                          <img
                                              src={dataItem.logo}
                                              alt=""
                                              style={{ width: '30px', height: '30px',}}
                                              onLoad={() => {
                                                  // fire window resize event to change height
                                              }}
                                          />
                                          <div>{dataItem.name}</div>
                                  </div>
                              )}
                        />
                    </div>
                    <div className="">
                        <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>{this.state.notify.name}</NoticeBar>
                    </div>
                    <div className="info-text">
                        <div className="left-line"></div>
                        <div className="text-line">热门商品</div>
                        <div className="right-line"></div>
                    </div>
                    {/*<div className="tabs-list">*/}
                    {/*    <WhiteSpace />*/}
                    {/*    <Tabs tabs={this.state.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props}/>}>*/}
                    {/*        {this.renderContent}*/}
                    {/*    </Tabs>*/}
                    {/*</div>*/}
                    <div className="good-list">
                        {
                            this.state.goodsList.map((res, index) => {
                                return <div key={index} className="good-item">
                                    <div className="good-item-img" onClick={() => {this.goDetail(0)}}>
                                        <img
                                            src={res.cover}
                                            alt=""
                                            style={{ width: '100%', height: '100%',}}
                                            onLoad={() => {
                                                // fire window resize event to change height
                                            }}
                                        />
                                    </div>
                                    <div className="good-item-info">
                                        <div className="good-item-info-title" onClick={() => {this.goDetail(res)}}>
                                            【热卖商品】{res.name}
                                        </div>
                                        <div className="good-item-info-num">累计销量：{res.stock_sales}</div>
                                        <div className="good-item-info-foot">
                                            <span style={{ fontSize: '20px', color: 'red'}}>{res.price_selling}</span>
                                            <img
                                                src={require("../../assets/img/home/shop-logo.png")}
                                                alt=""
                                                style={{ width: '20px', height: '20px'}}
                                                onLoad={() => {
                                                    // fire window resize event to change height
                                                }}
                                            />
                                        </div>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
                <TabBarExample selectedTab={'home'}></TabBarExample>
            </div>
        );
    }
}

